<template>
  <Table border :columns="columns" :data="data">
    <template #action="{ row, index }">
      <Button type="warning" class="btn" icon="ios-remove-circle-outline"
              v-if="row.status" size="small" @click="enableBtn(row, 0)">禁用</Button>

      <Button type="primary" class="btn" icon="md-checkbox" @click="enableBtn(row, 1)" v-else size="small">启用</Button>

      <Button type="error" class="btn" icon="ios-close-circle-outline" size="small" @click="remove(row)">移除</Button>
    </template>

    <template #status="{ row, index }">
      <DotTag type="primary" v-if="row.status">正常</DotTag>
      <DotTag type="error" v-else>失效</DotTag>
    </template>
    <template #footer>
      <div style="min-width: 300px; max-width: 380px;">
        <van-pagination v-model="page" :total-items="total"
                        :items-per-page="5" :show-page-size="5" force-ellipses
                        @page-click="showData">
        </van-pagination>
      </div>
    </template>
  </Table>
</template>

<script>

import VanPagination from '../components/VanPagination.vue'
import DotTag from '../components/DotTag.vue'

export default {
  props: {
     funcId: {
       type: Number,
       required: true
     }
  },
  data(){
    return {
      page: 1,
      pageSize: 5,
      total: 0,
      columns: [
        {
          title: '按钮名',
          key: 'name'
        },
        {
          title: '权限标识',
          key: 'remark'
        },
        {
          title: '状态',
          key: 'status',
          slot: 'status',
          width: 100
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ],
      data: [],
    }
  },
  created() {
     this.showData();
  },
  methods: {
     showData() {
       this.$api.queryBtnsByFuncID(this.page, this.pageSize, this.funcId).then(({data:ret})=> {
         if (ret.status === "10000") {
           this.data = ret.data.list ;
           this.total = ret.data.total ;
         }
       })
     },
     enableBtn(row, status) {
       this.$api.updateBtnStatus(row.id, status).then(({data:ret})=> {
          if (ret.status === '10000') {
             row.status = status ;
          }
       })
     },
     remove(row) {
        this.$Modal.confirm({
          title: '提示',
          content: `您确定要删除该部门吗?`,
          onOk: () => {
            // 负责 调用接口、完成 菜单状态的修改
            this.$api.removeBtn(row.id).then(({data: ret}) => {
              if (ret.status === "10000") {
                this.$Message.success({background: true, content: "数据删除成功"});
                this.showData();
              } else {
                this.$Message.error({background: true, content: ret.message});
              }
            })
          }
        })
     }
  },
  components: {
    VanPagination,
    DotTag,
  }
}
</script>

<style scoped>
.btn {
  margin: 0 2px;
}
</style>